  {include file="public/header" /}
   <style>
        body {
      background: #e1e0de;
    }
    * {
      box-sizing: border-box;
    }
h1,
h2,
h3,
h4 {
  font-weight: 700 !important;
}
.layui-card-header {
  width: 100%;
  border-bottom: 1px solid #999 !important;
  padding-left: 5px;
}
.layui-card {
  padding: 10px 20px 50px;
}
p {
  margin: 0 0 10px !important;
}
.layui-container {
  padding: 0 !important;
}
img {
  max-width: 100%;
}
::-moz-selection {
  background: #cccccc;
  color: #ffffff;
}
::selection {
  background: #cccccc;
  color: #ffffff;
}
.layui-breadcrumb {
  padding-left: 5px;
}
.layui-card h1 {
  margin: 10px auto 0;
}
.description {
  font-size: 15px;
  font-weight: bold;
  margin: 20px 0;
}

.layui-textarea {
  resize: none !important;
}

@media screen and (max-width: 800px) {
  .layui-card-header {
    line-height: normal !important;
    font-size: 10px !important;
  }
}

     
    .layui-card-body{
        padding: 10px 5px;
    }
.tijiao{background-color: #FDD702;font-weight: bold;border-radius: 5px;height: 30px;line-height: 30px;padding: 0 10px;}
.tijiao:hover{opacity: 0.7;}

/* 验证码 */
  .verification-code{
    /* background-color: red; */
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .verification-code-img{
    width: 29%;
    height: 2rem;
    background-color: lightblue;
    margin-left: 0.5rem;
  }
  .verification-code-img a{
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  .verification-code-input{
    width: 50.7%;
    height: 2rem;
    border-radius: 2px;
    padding:6px 10px;
  }
  .code-button-box{
    padding: 10px 10px;
    position: relative;
    height: 108px;
  }
  .code-button{
    position: absolute;
    bottom: 0;
  }    
  @media screen and (max-width: 760px)  {
  	.code-button{
  		position: absolute;
  		bottom: -23rem;
  		left: 5rem;
  	}
  	.layui-form-phone{
  		height: 45rem;
  	}
  	.phone-number-employees{
  		width: 45% !important;
  	}
  	.phone-Annual{
  		width: 35% !important;
  	}
	.phone-comment{
		width: 35% !important;
	}
	.phone-comment-input{
		width: 76% !important;
	}
	.phone-main{
		width: 35% !important;
	}
  	#code_div{
  		margin-top: 23.5rem;
  	}
  }
    </style>
 <div class="layui-container" style='font: 12px/14px arial,helvetica,sans-serif;'>
      <div class="layui-card">
        <span class="layui-breadcrumb" lay-separator="/">
      <a href="/" style="font: 12px/14px arial,helvetica,sans-serif;">{:lang('Home')}</a>
      {foreach $crumbs as $k=>$v }
      <a href="/{$v['crumbs_url']}" style="font: 12px/14px arial,helvetica,sans-serif;color:#36648A">{$v['alias_name']}</a>
      {/foreach}
    </span>
        <div class="layui-card-header">
          <h1>{:lang('Distributors Wanted')}!</h1>
        </div>
        <div class="layui-card-body">
          <div class="layui-row">
            <p style='color: #333;line-height: 24px;'>
              {:lang('Lily Bearing has been providing the industrial market with bearings since 2000.')}
            </p>
            <p>&nbsp;</p>
            <p style='color: #333;line-height: 24px;'>
              {:lang('Our focus is to provide distributor with high-quality bearings made in China. There are several advantages to being a distributor of lily bearing')},<br />
              ● {:lang('We have 20 years of experience in the OEM market. We will share these experiences with distributor to help them provide better solutions for end users.')}<br />
              ● {:lang('we have our own production factories and dozens of cooperative alliance factories,Under the premise of ensuring quality, we can provide more competitive prices.')}<br />
              ● {:lang('We have great advantages in Internet digital marketing, and being our distributor means getting more sales enquiries.')}
            </p>
            <p>&nbsp;</p>
            <p style='color: #333;line-height: 24px;'>
              {:lang('We are constantly looking for new distributors. If you would like to join our winning team, please fill in the following form. We will contact you as soon as possible')}!<br />
              ( * = {:lang('required information')})<br />
            </p>
           
           <div class="layui-bg-gray">
                    <div style='float:right;width:100%;padding-bottom: 20px'>
                        <h2 style="padding: 10px 5px">{:lang('Become Distributor')}</h2>
                        <div class="layui-form layui-form-phone">

                          <div class="layui-col-sm6" style="padding: 10px 10px">
                              <div style="float:left;width:25%;height: 40px;line-height: 40px;color: #333;">{:lang('Name')}<span style="color:#EB202B;font-size:18px">*</span>:</div>
                              <div class="layui-input-block" style="float:right;width:75%;height:40px">
                                  <input type="text" name="name" lay-verify="name" placeholder="输入您的姓名" class="layui-input" />
                              </div>
                          </div>
                          <div class="layui-col-sm6" style="padding: 10px 10px">
                              <div style="float:left;width:25%;height: 40px;line-height: 40px;color: #333;">{:lang('Company')}<span style="color:#EB202B;font-size:18px">*</span>:</div>
                              <div class="layui-input-block" style="float:right;width:75%;height:40px">
                                  <input type="text" name="company" lay-verify="company" placeholder="输入您的公司名称" class="layui-input" />
                              </div>
                          </div>
                          <div class="layui-col-sm6" style="padding: 10px 10px">
                              <div style="float:left;width:25%;height: 40px;line-height: 40px;color: #333;">{:lang('Email')}<span style="color:#EB202B;font-size:18px">*</span>:</div>
                              <div class="layui-input-block" style="float:right;width:75%;height:40px">
                                  <input type="text" name="email" lay-verify="email" placeholder="{:lang('Enter a valid email address')}" class="layui-input" />
                              </div>
                          </div>
                          <div class="layui-col-sm6" style="padding: 10px 10px">
                              <div style="float:left;width:25%;height: 40px;line-height: 40px;color: #333;">{:lang('phone')}<span style="color:#EB202B;font-size:18px">*</span>:</div>
                              <div class="layui-input-block" style="float:right;width:75%;height:40px">
                                  <input type="text" name="phone" lay-verify="phone" placeholder="输入您手机号" autocomplete="off" class="layui-input" />
                              </div>
                          </div>

                          <div class="layui-col-sm6" style="padding: 10px 10px">
                              <div style="float:left;width:25%;height: 40px;line-height: 40px;color: #333;">{:lang('Country')}<span style="color:#EB202B;font-size:18px">*</span>:</div>
                              <div class="layui-input-block" style="float:right;width:75%;height:40px">
                                <select name="country" lay-verify="country">
                                  <option value='中国' selected>中国</option>
                                </select>
                                  
                              </div>
                          </div>
                          <div class="layui-col-sm6" style="padding: 10px 10px">
                              <div class="phone-main" style="float:left;width:25%;height: 40px;line-height: 40px;color: #333;">{:lang('Main products')}<span style="color:#EB202B;font-size:18px">*</span>:</div>
                              <div class="layui-input-block" style="float:right;width:75%;height:40px">
                                  <input type="text" name="main_products" lay-verify="main_products" placeholder="{:lang('Enter your main products of your company')}" class="layui-input" />
                              </div>
                          </div>
                          <div class="layui-col-sm6" style="padding: 10px 10px">
                              <div class="phone-number-employees" style="float:left;width:25%;height: 40px;line-height: 40px;color: #333;">{:lang('Number of employees')}:</div>
                              <div class="layui-input-block" style="float:right;width:75%;height:40px">
                                  <input type="text" name="employees_number" placeholder="{:lang('Enter your number of employees')}" class="layui-input" />
                              </div>
                          </div>
                          <div class="layui-col-sm6" style="padding: 10px 10px">
                              <div class="phone-Annual" style="float:left;width:25%;height: 40px;line-height: 40px;color: #333;">{:lang('Annual sales')}:</div>
                              <div class="layui-input-block" style="float:right;width:75%;height:40px">
                                  <input type="text" name="sales" placeholder="{:lang('Enter your annual sales')}" class="layui-input" />
                              </div>
                          </div>

                          <div class="layui-col-sm8" style="padding: 10px 10px">
                              <div class="phone-comment" style="float:left;width:18%;height: 40px;line-height: 40px;color: #333;">{:lang('Comments')}<span style="color:#EB202B;font-size:18px">*</span></div>
                              <div class="layui-input-block phone-comment-input" style="float:right;width:82%;height:40px;padding-left:3px">
                                  <textarea name="comments" lay-verify="comments" placeholder="{:lang('How can we help?')}" class="layui-textarea"></textarea>
                              </div>
                          </div>

                          <div class="layui-col-sm4 code-button-box" style="padding: 10px 10px"> 
                             <?php if($base_data['is_show_code']==true){?>
                              <!-- 验证码 -->
                              <div class="layui-form-item" id="code_div">
                                <div class="verification-code">
                                  <div style="float:left;width:20%;height: 40px;line-height: 40px;color: #333;">code<span style="color:#EB202B;font-size:18px">*</span>:</div>
                                    <input class="verification-code-input layui-input" type="text" name="code" lay-verify='code' placeholder="{:lang('Verification code')}"/>
                                    <div class="verification-code-img">
                                      <img src="{:url('index/xunpan/verify')}" id="code_img" onclick="this.src=this.src.split('?')[0] + '?'+new Date().getTime()" title="Click to change one" >
                                    </div>
                                </div>
                              </div>
                              <?php } ?>

                            <div class="layui-col-sm4 code-button" style="padding: 10px 10px">
                                <div class="layui-input-block button" style="float:left;margin-top: 54px">
                                    <button id='gform_submit_button_4' class="layui-btn btn tijiao" lay-filter="formDemo" lay-submit type='button' style="color:black">{:lang('Submit')}</button>
                                </div>
                            </div>
                        </div>

                        </div>
                    </div>
                    <div style="clear:both"></div>
                </div>
          </div>
        </div>
      </div>
    </div>
 {include file="public/footer" /}
  <script>
      layui.use("element", function () {
        var element = layui.element;
        element.on("tab(demo)", function (data) {
          console.log(data);
        });
      });

layui.use('form', function(){
  var form = layui.form;
   /*验证规则*/
  form.verify({
    name: function(value, item){ //value：表单的值、item：表单的DOM对象
      if(value == ''){
         layer.closeAll('loading');
        return 'Please Fill In Your Name';
      }
    },
    company: function(value, item){ //value：表单的值、item：表单的DOM对象
      if(value == ''){
         layer.closeAll('loading');
        return 'Please Fill In Your Company';
      }
    },
    phone: function(value, item){ //value：表单的值、item：表单的DOM对象
      if(value == ''){
         layer.closeAll('loading');
        return 'Please Fill In Your Phone';
      }
    },
    email: function(value, item){ //value：表单的值、item：表单的DOM对象
      var t  = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,9})$/;
      if(value == ''){
         layer.closeAll('loading');
        return 'Please Fill In Your Email';
      }
      if(!(t.test(value))){
         layer.closeAll('loading');
        return 'The mailbox format is incorrect';
      }
    },
    country: function(value, item){ //value：表单的值、item：表单的DOM对象
      if(value == ''){
         layer.closeAll('loading');
        return 'Choose Your Country';
      }
    },
    main_products: function(value, item){ //value：表单的值、item：表单的DOM对象
      if(value == ''){
         layer.closeAll('loading');
        return 'Fill In The Main Products Of Your Company';
      }
    },
    comments: function(value, item){ //value：表单的值、item：表单的DOM对象
      if(value == ''){
         layer.closeAll('loading');
        return 'Please Fill In Comments';
      }
    }
    
  });

  form.on('submit(formDemo)', function(data){
    var index = layer.load(1, { shade: [0.1,'#fff'] });

    var name=$.trim($("input[name='name']").val());
    var company=$.trim($("input[name='company']").val());
    var email=$.trim($("input[name='email']").val());
    var phone=$.trim($("input[name='phone']").val());
    var country=$.trim($("select[name='country'] option:selected").val());
    var main_products=$.trim($("input[name='main_products']").val());
    var employees_number=$.trim($("input[name='employees_number']").val());
    var sales=$.trim($("input[name='sales']").val());
    var comments=$.trim($("textarea[name='comments']").val());
    var code = $.trim($("input[name='code']").val());


    var lasturl=<?php if(isset($_SERVER['HTTP_REFERER'])){ echo "'".$_SERVER['HTTP_REFERER']."'";}else{echo "'"."'";}?>;/*上一个页面的url 不能在ajax里面书写这样就多了一层页面关系*/

  
    $.post("{:url('index/xunpan/become_distributor')}",{name:name,company:company,email:email,phone:phone,country:country,main_products:main_products,employees_number:employees_number,sales:sales,comments:comments,lasturl:lasturl,code:code},function(res){
          if(res.status==1){
              layer.closeAll('loading');
              $(".layui-form input").each(function(){
                $(this).val('');
              })
              $("textarea[name='comments']").val('');
                
              layer.msg(res.msg,{time:2000,icon: 1},function(){
                location.href="/thank-you/";
              });
              return false;
          }else{
            layer.msg(res.msg,{time:2000,icon: 5});
            $("#distributor").removeClass("layui-btn-disabled");
            $("#distributor").removeAttr("disabled");
            layer.closeAll('loading');
            return false;
          }
    })
 
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  });
})
  
  </script>    